<template>
    <!-- U本位合约历史 -->
    <div class="perpetualHistory">
        <assets-head :title="$t('U本位合约历史')" :backFunc="() => {
            if ($route.query.goback) {
                $router.push({
                    path: '/funds',
                    query: {
                        tab: 2,
                        index: 0 // 0: 查看理财订单 1: 矿机
                    }
                })
            } else {
                //$router.push(`/perpetualContract/${symbol}?selectIndex=1`)
                $router.go(-1)
            }
        }" />
        <div>
            <van-tabs ref="tabs" v-model="type" swipeable @change="onChange" sticky>
                <van-tab :title="item.title" v-for="item in selectData" :key="item.title" :name="item.type">
                    <div class="all-select flex justify-end" v-if="symbol">
                        <div class="select-box flex" @click.stop="isAll = !isAll">
                            <div class="flex-1">
                                {{ symbol.toUpperCase() }}/USDT
                            </div>
                            <van-icon name="arrow-down" />
                            <div class="select-data" v-if="isAll">
                                <div class="select-item" @click.stop="selectItem(item2)"
                                    v-for="(item2, index) in currencyList" :key="index">{{ item2.symbol.toUpperCase() ||
                                        item2.symbol }}/USDT</div>
                            </div>
                        </div>
                    </div>
                    <template v-if="type === 'orders'">
                        <van-list v-model="loading" :loading-text="$t('加载中...')" :finished="finished"
                            :finished-text="dataList.orders.length ? $t('已经全部加载完毕') : ''" @load="onLoad" :offset="130"
                            class="px-32">
                            <PerpetualEntrustList v-if="type === 'orders'" :list-data="dataList.orders" @recall="recall">
                            </PerpetualEntrustList>
                            <div class="flex flex-col justify-center pt-50 pb-20 items-center"
                                v-if="!dataList.orders.length && !loading">
                                <img src="@/assets/image/assets-center/no-data.png" alt="" class="w-180 h-180" />
                                <p class="text-grey mt-10">{{ $t('暂无记录') }}</p>
                            </div>
                        </van-list>
                    </template>

                    <template v-if="type === 'hisorders'">
                        <van-list v-model="loading" :loading-text="$t('加载中...')" :finished="finished"
                            :finished-text="dataList.hisorders.length ? $t('已经全部加载完毕') : ''" @load="onLoad" :offset="130"
                            class="px-32">
                            <PerpetualHistoryPosition :list-data="dataList.hisorders"></PerpetualHistoryPosition>
                            <div class="flex flex-col justify-center pt-50 pb-20 items-center"
                                v-if="!dataList.hisorders.length && !loading">
                                <img src="@/assets/image/assets-center/no-data.png" alt="" class="w-180 h-180" />
                                <p class="text-grey mt-10">{{ $t('暂无记录') }}</p>
                            </div>
                        </van-list>
                    </template>
                </van-tab>
            </van-tabs>
        </div>
    </div>
</template>

<script>
import assetsHead from "@/components/assets-head";
import PerpetualEntrustList from '@/components/perpetual-entrust-list/index.vue';
import PerpetualHistoryPosition from '@/components/perpetual-history-position/index.vue';
import { _orderListCur, _orderListHold } from '@/API/trade.api'
import { _getCoins } from "@/API/home.api";
import { List, Tab, Tabs } from 'vant';
export default {
    data() {
        return {
            type: "orders",
            dataList: {
                orders: [],
                hisorders: []
            },
            isAll: false,
            symbol: '',
            selectData: [
                { title: this.$t('当前委托'), type: 'orders' },
                { title: this.$t('历史仓位'), type: 'hisorders' },
            ],
            loading: false,
            finished: false,
            page: 1,
        };
    },
    mounted() {
        this.getCoins()
        this.symbol = this.$route.query.symbol
    },
    methods: {
        getCoins() {
            _getCoins().then((res) => {
                console.log(res)
                this.currencyList = res
            })
        },
        onChange(e) {
            this.dataList[e] = []
            this.finished = false
            this.page = 1
            this.type = e
            this.loading = true;
            if (this.loading) {
                this.fetchList(this.symbol)
            }
        },
        onClickLeft() {
            this.$router.go(-1);
        },
        async fetchList(symbol) {
            const _api = this.type === 'orders' ? _orderListCur : _orderListHold
            const type = this.type
            _api(symbol, type, this.page).then(data => {
                this.dataList[type] = this.dataList[type].concat(data)
                this.loading = false
                if (data.length < 10) {
                    this.finished = true
                }
                this.page++
            })
        },
        recall() {
            this.page = 1;
            this.dataList.orders = []
            this.fetchList(this.symbol)
        },
        onLoad() {
            this.fetchList(this.symbol)
        },
        //选择币种
        selectItem(item) {
            this.dataList[this.type] = []
            this.page = 1
            this.symbol = item.symbol
            this.fetchList(this.symbol)
            this.isAll = false
        }
    },
    components: {
        PerpetualEntrustList,
        PerpetualHistoryPosition,
        assetsHead,
        [List.name]: List,
        [Tabs.name]: Tabs,
        [Tab.name]: Tab
    },
    beforeRouteEnter(to, from, next) {
        const { query: { symbol } } = to
        next(vm => {
            vm.symbol = symbol

        })
    }
}

</script>
<style lang="scss" scoped>
.perpetualHistory {
    width: 100%;
    box-sizing: border-box;

    ::v-deep .van-tabs__nav {
        background: $tab_background;
    }

    ::v-deep .van-tab--active {
        color: $text_color;
    }
}

.active-line {
    position: relative;
    padding-bottom: 30px;
    color: $text_color;
}

.active-line::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    right: 0;
    width: 280px;
    height: 8px;
    background-color: $color_main;
}

.select-box {
    width: 160px;
    height: 50px;
    background: $main_background;
    color: $text_color;
    display: flex;
    align-items: center;
    font-size: 14px;
    padding: 0 20px;
    position: relative;
    padding-top: 10px;
    margin-right: 16px;

    .select-data {
        position: absolute;
        top: 55px;
        left: 0;
        z-index: 10;
        width: 100%;
        height: 300px;
        overflow-y: auto;
        background: $main_background;
        border: 1px solid $border_color;


        .select-item {
            padding: 20px 20px;
            text-align: center;
            border-bottom: 1px solid $border_color;
        }
    }
}
</style>
